<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>debug7</title>
		<style>
			body
			{
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="bg">
			<div id="d0">
				<canvas id="cv0" height="1000" width="1800"></canvas>
			</div>
		</div>
		<script>
			/*
			var mond0=0;
			document.getElementById('d0').onmouseover(mond0=1);
			document.getElementById('d0').onmouseout(mond0=0);
			*/
			/*var canvas=document.getElementById("canvas");//document.getElementById原生获取 用js方法
			//用原生放法设置canvas的宽高
			canvas.width=window.innerWidth;
			canvas.height=window.innerHeight;
			var ctx=canvas.getContext("2d");//相当于画笔 并转为2d
		
			ctx.font="18px sans-seri";//设置字体的样式 前面是字体的大小 后面是样式
			ctx.fillStyle="red";//设置字体的颜色 fillStyle意思是填充
			ctx.fillText("Y",250,250);//设置字体ctx.fillText("Y",x,y); Y意思是什么字 x，y是位置*/
		
			//var 和this的意思 var意思是当前对象 this意思是全局的
		
			//页面命名空间
			var Canvas={};
			//作者
			Canvas.anim={
			//初始化函数 让canvas于浏览器等宽等高
			init:function(){
				var canvas=document.getElementById("cv0");
				//canvas.width="1000px";
				//canvas.height="1000px";
				this.ctx=canvas.getContext("2d");
				this.cw=canvas.width;
				this.ch=canvas.height;
				this.particles1 =[];
				//particles.length=100;
				this.letters="艹";//letters单词
			},
			//绘制动画
			render:function(){
				//改变粒子的位置
				var particle1={
					x: 500,
					y: this.ch/2,
					//获取的值
					character: 
					this.letters[Math.floor(Math.random()*this.letters.length)],//Math.floor意思是向下取证
					//速度值
					xSpeed: (Math.random()*40) -20,//Math.random意思是0到1随机值
					ySpeed: (Math.random()*40) -20
				};
				this.particles1.push(particle1);//push是数组的意思 从外界获取宽高在放在particle进行运算
				this.drawparticles();	
			},
			//绘制字母
			drawparticles:function(){
				this.fadeCanvas();
				var particleCount = this.particles1.length;//particleCount数量
				for(i=0;i<particleCount;i++){
					var particle1=this.particles1[i]
					this.ctx.font="30px sans-seri";
					this.ctx.fillStyle="aqua";
					this.ctx.fillText(particle1.character,particle1.x,particle1.y);
					particle1.x +=particle1.xSpeed;
					particle1.y +=particle1.ySpeed;
					//particle.y *= 0.98;//只移动x轴的值 y轴固定逐渐趋向于0；
		
				}
				/*var particle=this.particles[0];
				// console.log(particle); 能显示particle的值
				*/
			},
			//先清除画布
			fadeCanvas: function(){
				this.ctx.fillStyle="rgba(0,0,0,.1)";
				this.ctx.fillRect(0,0,this.cw,this.ch);
			}
		};
		Canvas.anim.init();//执行函数
		Canvas.anim.render();
		
		//定时器
		setInterval(function(){
			Canvas.anim.render();
		},60);
		</script>
	</body>
</html>